<template>
     <header class="header-container">
          <!-- 标题区域 -->
          <div
               class="header-title"
               @click="navigateTo(centerMenu)"
               :title="`前往${centerMenu?.meta?.title || '首页'}`"
          >
               {{ appTitle }}
          </div>

          <!-- 导航菜单 -->
          <nav class="nav-menu" @wheel="scrollMileage">
               <el-scrollbar ref="scrollBarRef">
                    <div class="menu-container">
                         <div
                              v-for="item in filteredMenuList"
                              :key="item.path"
                              class="menu-item"
                              :class="{
                                   'is-active': activeMenu === item.path,
                              }"
                              @click="navigateTo(item)"
                              :title="item.meta.title"
                         >
                              {{ item.meta.title }}
                         </div>
                    </div>
               </el-scrollbar>
          </nav>

          <!-- 用户设置 -->
          <div class="user-settings">
               <Setting />
          </div>
     </header>
</template>

<script setup lang="ts">
import { ref, computed, onMounted } from 'vue'
import { useRouter, useRoute } from 'vue-router'
import Setting from './setting/index.vue'
import { type RouteRecordRaw } from 'vue-router'

const props = defineProps({
     menuList: {
          type: Array<RouteRecordRaw | any>,
          default: () => [],
     },
})

const router = useRouter()
const route = useRoute()
const activeMenu: any = ref('')

const appTitle = computed(() => import.meta.env.VITE_APP_TITLE)

// 过滤隐藏的菜单项
const filteredMenuList = computed(() => {
     const level1MenuList = props.menuList.filter((item) => !item.meta?.hidden)
     const layoutChildren =
          props.menuList
               .find((item) => item.meta.title === 'layout')
               ?.children?.filter(
                    (child: RouteRecordRaw) => !child.meta?.hidden,
               ) || []
     return [...layoutChildren, ...level1MenuList]
})
// 获取中心菜单项
const centerMenu = computed(() =>
     props.menuList?.find((item) => item.meta.title === '一张图'),
)
// 初始化当前激活菜单
onMounted(() => {
     activeMenu.value =
          route.meta?.parentPath || localStorage.getItem('activeMenu') || ''
     console.log(activeMenu.value)
})
const scrollBarRef = ref()
// 导航方法
const navigateTo = (menuItem: any) => {
     if (!menuItem?.path) return
     activeMenu.value = menuItem.path
     localStorage.setItem('activeMenu', menuItem.path)
     router.push(menuItem.path)
}
const scrollMileage = (e: WheelEvent) => {
     scrollBarRef.value.wrapRef.scrollLeft += e.deltaY
}

watch(
     () => route.path,
     () => {
          activeMenu.value = route.meta?.parentPath || route.path
          localStorage.setItem('activeMenu', activeMenu.value)
     },
)
</script>

<style scoped lang="scss">
.header-container {
     --header-bg: url('@/assets/images/layoutLargeScreen/handerBgc3.png');
     --menu-bg: url('@/assets/images/layoutLargeScreen/menuBgc.png');
     --menu-active-bg: url('@/assets/images/layoutLargeScreen/menuBgcActive.png');
     --text-color: rgba(243, 252, 255, 0.9);
     --text-shadow: 0 0 10px rgba(33, 187, 243, 0.685);
     --transition-duration: 0.3s;

     width: 100%;
     height: 100%;
     background: var(--header-bg) no-repeat;
     background-size: 100% 120%;
     display: flex;
     align-items: center;
     position: relative;
     z-index: 10;
     gap: 20px;

     .header-title {
          width: 25%;
          height: 100%;
          display: flex;
          align-items: center;
          font-size: 1.4vw;
          font-family: 'FZZDHK', sans-serif;
          color: var(--text-color);
          text-shadow: var(--text-shadow);
          letter-spacing: 5px;
          margin-left: 30px;
          cursor: pointer;
          font-family: 'YU';
          transition: transform var(--transition-duration);

          &:hover {
               transform: scale(1.02);
          }
     }

     .nav-menu {
          flex: 1;
          height: 100%;
          min-width: 0; // 防止flex溢出
          overflow: auto;
          padding-top: 10px;

          .menu-container {
               display: flex;
               align-items: center;
               height: 100%;
          }

          .menu-item {
               width: 200px;
               padding-top: 5px;
               height: 35px;
               display: flex;
               align-items: center;
               justify-content: center;
               color: #fff;
               letter-spacing: 2px;
               font-size: 0.9vw;
               font-family: 'FZZDHK', sans-serif;
               background: var(--menu-bg) no-repeat;
               background-size: 100% 100%;
               cursor: pointer;
               transition: all var(--transition-duration);
               // mix-blend-mode: difference;

               &:hover {
                    transform: translateY(-2px);
                    filter: brightness(1.1);
                    background: var(--menu-active-bg) no-repeat;
                    background-size: 100% 100%;
               }

               &.is-active {
                    background: var(--menu-active-bg) no-repeat;
                    background-size: 100% 100%;
                    transform: translateY(-2px);
               }
          }
     }

     .user-settings {
          display: flex;
          align-items: center;
          margin-right: 20px;
     }
}

// 深度选择器样式
:deep(.el-input__wrapper) {
     background: transparent !important;
}

:deep(.el-cascader__dropdown) {
     background: transparent !important;
     box-shadow: none !important;
}

:deep(.el-scrollbar__wrap) {
     overflow-x: auto !important;
     overflow-y: hidden !important;
     margin-bottom: 6px;
     display: flex;
     align-items: center;
}

:deep(.el-scrollbar__bar.is-horizontal) {
     height: 6px;

     .el-scrollbar__thumb {
          background-color: rgba(255, 255, 255, 0.818);
          border-radius: 3px;

          &:hover {
               background-color: rgb(255, 255, 255);
          }
     }
}

@media (max-width: 1600px) {
     .header-container {
          .nav-menu .menu-item {
               width: 180px;
               font-size: 1vw;
          }
     }
}

@media (max-width: 1440px) {
     .header-container {
          .nav-menu .menu-item {
               width: 160px;
               font-size: 1.1vw;
          }
     }
}
</style>
